import { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Table, Tag, Button, Input, Select } from 'antd';
import { history } from 'umi'
import { statusColorMap, statusTextMap } from './params';
import { queryProjectList } from '@/services/project'
import styles from './index.less';

const { Option } = Select;
const { Search } = Input;

const ProjectPage = (props) => {
  const [data, setData] = useState([]);
  const [status, setStatus] = useState('');
  const [searchVal, setSearchVal] = useState('')

  useEffect(()=>{
    getData()
  }, [])

  const getData = async () => {
    const res =  await queryProjectList();
    if(res.code == 200){
      const list = res?.data??[];
      setData(list)
    }
    console.log(res)
  }

  const changeStatus = (value) =>{
    setStatus(value)
    initTable(value)
  }
  const changeSearch = (e) => {
    setSearchVal(e.target.value)
  }
  const onSearch = () => {
    initTable(status)
  }
  const initTable = (status) => {
    console.log('table--init');
  }
  const goDetail = (record) => {
    history.push({
      pathname: '/newproject',
    });
  }
  const columns = [
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (text, record) => (<div style={{ color: '#6859c6', fontWeight: '700' }}>{text} </div>)
    },
    {
      title: '负责人',
      dataIndex: 'master',
      key: 'master',
      align: 'center',
      render: (text, record) => (<div style={{ color: '#6d5ac8' }}>{text}</div>)
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (text)=>(<Tag style={{ height: '24px' }} color={statusColorMap.get(text+'')}>{statusTextMap.get(text+'')}</Tag>)
    },
    {
        title: '进度',
        dataIndex: 'process',
        key: 'process',
        align: 'center',
        // render: (text)=>(<Tag style={{ height: '24px' }} color={statusColorMap.get(text+'')}>{statusTextMap.get(text+'')}</Tag>)
    },
    {
      title: '创建时间',
      dataIndex: 'creationtime',
      key: 'creationtime',
      align: 'center',
    },
    {
        title: '截止时间',
        dataIndex: 'starttime',
        key: 'starttime',
        align: 'center',
    },
  ]
  const clickRowBody = (record) => {
    history.push({
      pathname: '/newproject',
      query: {
        id: record.id,
      }
    })
  };
  return (
    <div className={styles.tableWrap}>
      <div className={styles.listWrap}>
          <div className={styles.statueWrap}>
            <span>项目状态：</span>
            <Select style={{width: 150}} value={status} onChange={changeStatus}>
                <Option key='' value="">全部</Option>
                <Option key='0' value="0">待提交评审</Option>
                <Option key='1' value="1">评审中</Option>
                <Option key='2' value="2">开发中</Option>
                <Option key='3' value="3">上线审核中</Option>
                <Option key='4' value="4">已完成</Option>
            </Select>
          </div>
          <div>
            <Search value={searchVal} placeholder="请输入项目名称搜索" onChange={changeSearch} onSearch={onSearch} style={{ width: 200 }} />
            <Button type='primary' icon={<PlusOutlined />} style={{marginLeft: '10px'}} onClick={goDetail}>创建项目</Button>
          </div>
      </div>
      <div style={{padding: '20px'}}>
         <Table columns={columns} dataSource={data} bordered 
           onRow = {
             record => {
               return {
                 onClick: ()=>clickRowBody(record),
               }
             }
           }
         />
      </div>
    </div>
  )
}

export default ProjectPage